<template>
<!-- 当前模板是视频流海报分享的组件支持多张分享 -->
  <view class="fixed_box" @click.stop="cancelSharePosterFn">
    <view class="poster_publicPopup" @click.stop="cancelSharePosterFn">
      <swiper
        @click.stop=""
        class="swiper_box"
        :duration="500"
        :current="current"
        next-margin="102rpx"
        @change="posterChange"
        @transition="transitionFn"
        :class="{'pointer_events':disableTouch}"
      >
        <swiper-item class="swiper-item_box" v-for="(item , index) in swiperList" :key="index" @click.stop="">
          <view class="share_msg_box">
            <view :class="{'load_box': true, 'load_box_w': index==0&&isShareType==1}">
              <image class="load_img_box" src="https://image.qqpyyds.com/mpAppImg/icon/load_img.gif" alt="" />
            </view>
            <image v-if="item.url" :class="{'poster_share_img': true, 'poster_share_img_w': index==0&&isShareType==1}" :id="`img${index}`" mode="aspectFill" :src="item.url"/>
          </view>
        </swiper-item>
      </swiper>
      <!-- 卡片点 -->
      <view class="spot_list" v-if="swiperList.length>1">
        <view v-for="(spot , spotIndex) in swiperList" :key="spotIndex" :class="{'spot_box':true,'spot_box_av':current==spotIndex}"></view>
      </view>
      <!-- 卡片点 -->
      <view class="keep_btn_box" @click.stop="saveImgFn" hover-class='hover'>保存到相册</view>
    </view>
    <SharePostersWhite ref="shareWhiteChild" @drawWhiteShareCardFn="drawWhiteShareCardFn" />
    <ShareCard ref="ShareCardChild" @drawShareCardFn="drawShareCardFn" />
  </view>
</template>
<script>
import SharePostersWhite from "@/components/shareImage/sharePostersWhite.vue" // 白色团购海报
import ShareCard from "@/components/shareImage/shareCard.vue" // 红色海报
export default {
  props: {
    shareVideoData: {
      type: Object,
      default: {},
    }
  },
  components: {
    SharePostersWhite,
    ShareCard,
  },
  data () {
    return {
      current: 0,
      swiperList: [],
      shareCanvasData: {}, // 需要绘制的数据
      disableTouch: true,
      isShareType: 0,
      swiperMun: 1,
    }
  },
  created () {
  },
  mounted () {
    if (this.shareVideoData.isShareType) { // 默认不传根据是否有商品判断是动态分享还是团购
      this.isShareType = this.shareVideoData.isShareType
    } else {
      this.isShareType = this.shareVideoData.isGroup==2?1:0
    }
    if (this.shareVideoData.swiperMun) { // 需要的海报张数，有携带swiperMun
      this.swiperMun = this.shareVideoData.swiperMun
    } else {
      this.swiperMun = 1
      if (this.isShareType==1) this.swiperMun = 2 // 团购需要2张1.2版本目前在里面处理
    }
    if (this.swiperMun>1) this.disableTouch = false // 海报张数超过1张开启活动功能
    for (let index = 0; index < this.swiperMun; index++) { // 遍历需要的卡片数量轮播DOME
      let data_ = {url: '', isShow: true}
      let title_ = this.shareVideoData.title.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, ""); // 去除颜文字，解决ios海报生成空白的bug
      if (!title_) { // 没有标题添加默认标题
        if (this.isShareType == 0) title_ = `发布了一个新的视频，快来看看吧！`
        if (this.isShareType == 1) title_ = `发布了一个新的视频团购，快来购买吧！`
        if (this.isShareType == 2) title_ = `发布了一个新的视频团购，快来一键帮卖，轻松赚佣金！`
      }
      data_ = {
        ...data_,
        title: title_,
      }
      this.swiperList.push(data_)
    }
    this.drawShareImgFn() // 绘制分享图片
  },
  methods: {
    drawShareImgFn () {
      this.shareCanvasData = {}
      this.shareCanvasData = {
        userAvatar: this.shareVideoData.communityLogo || this.shareVideoData.avatar,// 团长头像
        userNickname: this.shareVideoData.communityName || this.shareVideoData.nickname,// 名字
        page: `pagesB/dynamic/${this.shareVideoData.mediaType && this.shareVideoData.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}`, // 太阳码地址
        // options: { // 太阳码地址参数
        //   dynamicId: this.shareVideoData.dynamicId,
        //   shareType: true,
        //   type: 2,
        // },
        // title: this.swiperList[this.current].title,
        copyText1: `给你分享一条${this.shareVideoData.mediaType && this.shareVideoData.mediaType === 1 ? '图文' : '视频'}动态`,
        type: this.isShareType,
        copyText2: `长按识别二维码${this.shareVideoData.mediaType && this.shareVideoData.mediaType === 1 ? '查' : '观'}看`,
        bgImgUrl: this.shareVideoData.thumbnail,
      }
      // 商品海报
      if (this.shareVideoData.isGoods) {
        this.shareCanvasData.page = this.shareVideoData.page
        this.shareCanvasData.options = this.shareVideoData.options
        this.shareCanvasData.title = this.shareVideoData.title.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, ""); // 去除颜文字，解决ios海报生成空白的bug
        this.shareCanvasData.isGoods = this.shareVideoData.isGoods
      } else {
        // 视频海报
        this.shareCanvasData.options = {
          dynamicId: this.shareVideoData.dynamicId,
          shareType: true,
          type: 2,
        }
        this.shareCanvasData.title = this.swiperList[this.current].title
      }
      if (this.isShareType==1) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          price: '￥'+ this.shareVideoData.minSalePrice,
          minSalePrice: this.shareVideoData.minSalePrice,
          maxSalePrice: this.shareVideoData.maxSalePrice || this.shareVideoData.minSalePrice,
          originalPrice: this.shareVideoData.marketPrice?'￥'+ this.shareVideoData.marketPrice:'市场价',
          copyText1: `喊你来跟团啦！`,
          copyText2: '长按识别二维码立即跟团',
          copyText3: '即将恢复',
        }
      }
      if (this.isShareType==2) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          copyText1: '长按识别二维码',
          copyText2: `帮卖立赚`,
        }
        this.shareCanvasData.options = {
          ...this.shareCanvasData.options,
          applyForHelp: true, // 邀请帮卖
          idCode: this.$store.state.userInfo.idCode, // 帮卖id
        }
      }
      if ([1,2].includes(this.isShareType)) {
        this.shareCanvasData = {
          ...this.shareCanvasData,
          viewsOfText: this.shareVideoData.totalBuyCount>0? `已跟团${this.shareVideoData.totalBuyCount}人次`:'一大波人赶来中',
        }
      }
      if (this.isShareType==1) { // 团购的绘制白色卡片先
        this.$refs.shareWhiteChild.shareWhitePoster(this.shareCanvasData) // 绘制团购白色卡片
      } else {
        this.$refs.ShareCardChild.sharePosterFrends(this.shareCanvasData) // 绘制红色卡片
      }
    },
    drawWhiteShareCardFn (res) { // 绘制团购白色卡片成功回调
      if (res.code == 200) {
        let index_ = 0
        this.swiperList[index_] = {
          ...this.swiperList[index_],
          url: res.url,
          isShareType: res.isShareType
        }
        this.$forceUpdate()
        this.$refs.ShareCardChild.sharePosterFrends(this.shareCanvasData) // 绘制完白色卡片在绘制红色卡片
        console.log(res,'绘制团购白色卡片resresres')
      }
    },
    drawShareCardFn (res) { // 红色卡片绘制成功回调
      if (res.code == 200) {
        let index_ = 0
        if (res.isShareType == 1) index_ = 1
        this.swiperList[index_] = {
          ...this.swiperList[index_],
          url: res.url,
          isShareType: res.isShareType
        }
        this.$forceUpdate()
        console.log(res,'红色卡片绘制成功回调resresres')
      }
    },
    transitionFn (e) {
      // console.log(e,'transitionFn')
    },
    posterChange (e) {
      this.current = e.detail.current
    },
    cancelSharePosterFn () {
      this.$emit('cancelSharePosterFn')
    },
    saveImgFn () {
      let this_ = this
      wx.saveImageToPhotosAlbum({
        filePath: this_.swiperList[this_.current].url,
        success: function(res) {
          this_.cancelSharePosterFn()
          wx.showToast({
            title: '保存成功',
            duration: 1000
          })
        },
        fail(err){
          console.log(err,'errerrerrerr')
          if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
            wx.showModal({
              title: '提示',
              content: '需要您授权保存相册',
              showCancel: false,
              success: modalSuccess => {
                wx.openSetting({
                  success(settingdata) {
                    console.log("settingdata", settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限成功,再次点击图片即可保存',
                        showCancel: false,
                      })
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限失败，将无法保存到相册哦~',
                        showCancel: false,
                      })
                    }
                  },
                  fail(failData) {
                    console.log("failData", failData)
                  },
                  complete(finishData) {
                    console.log("finishData", finishData)
                  }
                })
              }
            })
          }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.fixed_box {
  .pointer_events {
    pointer-events: none;
  }
  .poster_publicPopup {
    width: 100vw;
    .swiper_box {
      height: 1064rpx;
    }
    .swiper-item_box {
      .share_msg_box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .poster_share_img {
          border-radius: 16rpx;
          position: relative;
          z-index: 9;
          &.poster_share_img_w {
            height: 1008rpx;
          }
        }
        .load_box {
          width: 560rpx;
          height: 1008rpx;
          background-color: #fff;
          border-radius: 16rpx;
          position: absolute;
          bottom: 0;
          right: 0;
          z-index: 1;
          &.load_box_w {
            height: 1008rpx;
          }
          .load_img_box  {
            width: 64rpx;
            height: 64rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
      }
      }
    }
    .spot_list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;
      .spot_box {
        width: 12rpx;
        height: 12rpx;
        background: rgba(255, 255, 255, .4);
        margin-right: 8rpx;
        border-radius: 50%;
        overflow: hidden;
        &.spot_box_av {
          background: #fff;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .keep_btn_box {
      margin: 80rpx auto 0;
    }
  }
}

</style>